
<template>
  <el-dialog v-model="ifShow" title="Tips" width="1000" :before-close="handleCancel">
    <el-radio-group v-model="activeKey" size="large">
      <el-radio-button label="改派司机" value="driver" />
      <el-radio-button label="改派供应商" value="supplier" />
      <el-radio-button label="外派司机" value="outDriver" />
    </el-radio-group>

    <div class="form_container">
      <el-form ref="driverFormRef" style="max-width: 600px" :model="driverForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
        <template v-if="activeKey == 'driver'">
          <el-form-item label="司机" prop="driverId">
            <el-select filterable clearable v-model="driverForm.driverId" placeholder="请选择" :filter-method="handleDriverChange">
              <el-option v-for="item in driverOptions" :key="item.id" :label="item.driverName" :value="item.id">{{ item.driverName }}-{{ item.driverPhone }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="司机价格" prop="driverPrice">
            <el-input v-model="driverForm.driverPrice" />
          </el-form-item>
        </template>

        <template v-if="activeKey == 'supplier'">
          <el-form-item label="供应商" prop="supplierId">
            <el-select filterable clearable v-model="driverForm.supplierId" placeholder="请选择">
              <el-option v-for="item in supplierOptions" :key="item.id" :label="item.companyName" :value="item.id">{{ item.companyNo }}-{{ item.companyName }}</el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>
    </div>

    <!-- 外派司机 -->
    <div class="form_container" v-show="activeKey == 'outDriver'">
      <div class="form_container">
        <el-form ref="outFormRef" style="max-width: 600px" :model="outSendForm" :rules="outRules" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="车系" prop="carSeriesId">
            <el-select filterable clearable @change="handleCarType" :filter-method="handleSearchCar" v-model="outSendForm.carSeriesId" placeholder="请选择">
              <el-option v-for="item in vehiclOptions" :key="item.id" :label="`${item.vehicleType}-${item.vehicleBrand}-${item.vehicleSeries}`" :value="item.id">
                {{ item.vehicleType }}-{{ item.vehicleBrand }}-{{ item.vehicleSeries }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆颜色" prop="carColor">
            <el-input v-model="outSendForm.carColor" />
          </el-form-item>
          <el-form-item label="车牌" prop="carNum">
            <el-input v-model="outSendForm.carNum" />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="outSendForm.name" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="outSendForm.phone" />
          </el-form-item>
          <el-form-item label="价格" prop="driverPrice">
            <el-input v-model="outSendForm.driverPrice" />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import CommonApi from "@/api/common";
import OrderApi from "@/api/order";
const emit = defineEmits(["success"]);
const driverFormRef = ref(null);
const driverForm = reactive({
  driverId: "",
  driverPrice: "",
  supplierId: "",
});
const rules = reactive({
  driverId: [{ required: true, message: "请选择司机", trigger: "blur" }],
  supplierId: [{ required: true, message: "请选择供应商", trigger: "blur" }],
});
const outSendForm = reactive({
  carBrand: "",
  carColor: "",
  carNum: "",
  carSeries: "",
  carSeriesId: "",
  driverPrice: "",
  name: "",
  orderId: "",
  phone: "",
});
const outRules = {
  carSeriesId: [{ required: true, message: "请选择车系" }],
  carColor: [{ required: true, message: "请选择车辆颜色" }],
  carNum: [{ required: true, message: "请输入车牌号" }],
  name: [{ required: true, message: "请输入司机姓名" }],
  phone: [{ required: true, message: "请输入司机手机号" }],
  driverPrice: [{ required: true, message: "请输入司机价格" }],
};
const outFormRef = ref(null);
// 定义接收的属性
const activeKey = ref("driver");
const props = defineProps<{}>();
const ifShow = ref(false);
const driverOptions = ref();
const supplierOptions = ref();
const vehiclOptions = ref();
const orderId = ref();
function edit(row: any) {
  nextTick(() => {
    CommonApi.getSupplier({ pageNo: 1, pageSize: 9999, status: 1 }).then((data) => {
      if (data.code == 0) {
        supplierOptions.value = data.result;
      }
    });

    // driverFormRef.value.resetFields();
    // outFormRef.value.resetFields();
    ifShow.value = true;

    activeKey.value = "driver";
    orderId.value = row.id;
    driverForm.driverPrice = row.driverPrice;
    outSendForm.driverPrice = row.supplierPrice;
  });
}

function handleCarType(value: any) {
  let obj = vehiclOptions.value.find((item: any) => item.id == value);
  outSendForm.carBrand = obj.vehicleBrand;
  outSendForm.carSeries = obj.vehicleSeries;
}
//车型搜索事件
const handleSearchCar = debounce(handleSearchCarType, 500); // 车系查询、
const handleDriverChange = debounce(handleSearchDriver, 500); // 司机搜索
function handleSearchCarType(name: string) {
  CommonApi.getCars({ vehicleName: name }).then((data) => {
    if (data.code == 0) {
      vehiclOptions.value = data.result;
    }
  });
}
function handleSearchDriver(name: string) {
  CommonApi.getDriver({ driverName: name }).then((data) => {
    if (data.code == 0) {
      driverOptions.value = data.result;
    }
  });
}
// 手动实现防抖函数
function debounce(func: any, wait: any) {
  let timeout: any;
  return function (...args: any) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}
// function handleSearchCar(value) {
//   console.log(value);
// }

/**
 * 确定按钮点击事件
 */

async function handleOk() {
  if (activeKey.value == "driver") {
    await driverFormRef.value.validateField("driverId");
    driverForm.orderId = orderId.value;
    OrderApi.sendDriver(driverForm).then((data) => {
      if (data.code == 0) {
        ElMessage.success(data.message);
        driverFormRef.value.resetFields();
        ifShow.value = false;
        emit("success");
      }
    });
  } else if (activeKey.value == "supplier") {
    await driverFormRef.value.validateField("supplierId");
    OrderApi.sendSupplier({ supplierId: driverForm.supplierId, orderId: orderId.value }).then((data) => {
      if (data.code == 0) {
        ElMessage.success(data.message);
        driverFormRef.value.resetFields();
        ifShow.value = false;
        emit("success");
      }
    });
  } else {
    await outFormRef.value.validate();
    outSendForm.orderId = orderId.value;
    OrderApi.sendDriverOut(outSendForm).then((data) => {
      if (data.code == 0) {
        ElMessage.success(data.message);
        outFormRef.value.resetFields();
        ifShow.value = false;
        emit("success");
      }
    });
    // sendDriverOut
    // await validate2();
  }
}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  driverFormRef.value.resetFields();
  outFormRef.value.resetFields();
  ifShow.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {
  let queryParams = {
    pageNo: 1,
    pageSize: 9999,
  };
  //查询车系
  CommonApi.getCars({ pageNo: 1, pageSize: 20 }).then((data) => {
    if (data.code == 0) {
      vehiclOptions.value = data.result;
    }
  });
  CommonApi.getDriver({ pageNo: 1, pageSize: 20 }).then((data) => {
    if (data.code == 0) {
      driverOptions.value = data.result;
    }
  });
});
</script>
<style lang="scss" scoped>
.form_container {
  margin-top: 24px;
}
</style>
